<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">
        <ui:define name="title">
            Pesquisar Bairros
        </ui:define>

        <ui:define name="content">
            <h:form id="pesquisarBairroForm">
                <p:messages id="pesquisarBairroMessages" autoUpdate="true" />
                
                <div class="actions">
                    <div id="buttons">
                        <p:button value="Cadastrar" outcome="criarBairro.xhtml"
                                  icon="ui-icon-plus" styleClass="ui-priority-primary">
                        </p:button>
                    </div>
                </div> 
                        <p:fieldset legend="Filtros" id="dadosBairroPanel" >
                        <f:validateBean disabled="true">
                                <div class="row">
                                    <div class="column1">
                                        <p:outputLabel value="Nome" for="nomeBairroInputText" />
                                    </div>
                                    <div class="column4">
                                        <p:inputText id="nomeBairroInputText" value="#{ managerPesquisarBairro.bairroPesquisar.nome }" />
                                    </div>

                                    <div class="column2">
                                        <p:outputLabel value="Cidade" for="cidadeAutoComplete" />
                                    </div>
                                    <div class="column4">
                                        <p:autoComplete id="cidadeAutoComplete" value="#{ managerPesquisarBairro.bairroPesquisar.cidade }"
                                            forceSelection="true" dropdown="true" var="cidade" itemValue="#{ cidade }" 
                                            itemLabel="#{ cidade.nome }" completeMethod="#{ managerPesquisarBairro.autocompletarCidade }"
                                            converter="conversorcidade" minQueryLength="3" />
                                    </div>
                                    </div>
                        </f:validateBean>
                            </p:fieldset>

                        <div class="command">
                            <p:commandButton
                                id="pesquisarcommandButton" value="Pesquisar" icon="ui-icon-search"
                                styleClass="ui-priority-primary" oncomplete="widthFix();"
                                update="@form" actionListener="#{ managerPesquisarBairro.pesquisar() }" />
                            <p:commandButton value="Limpar" icon="ui-icon-close" oncomplete="widthFix();"
                                             update="@form" actionListener="#{ managerPesquisarBairro.limpar() }" />
                        </div>

                        <p:dataTable styleClass="column12" id="bairrosDataTable" var="bairro"
                                     value="#{ managerPesquisarBairro.bairros }"
                                     rows="10" paginator="true" paginatorPosition="bottom" emptyMessage="Nenhum bairro encontrado">
                            <p:column width="5%" headerText="Opções">
                                <div class="options1">
                                    <p:button
                                        title="Visualizar" href="visualizarBairro.xhtml?bairroId=#{ bairro.id }"
                                        icon="ui-icon-search"/>
                                </div>
                            </p:column>
                            <p:column headerText="Nome">
                                <h:outputText value="#{ bairro.nome }" />
                            </p:column>
                        </p:dataTable>                        
            </h:form>
        </ui:define>
    </ui:composition>
</html>
